Kết quả Hit Test WebXR: Xử lý Kết quả Dò tia (Ray Casting) cho Trải nghiệm Đắm chìm

WebXR Device API mở ra những khả năng thú vị để tạo ra các trải nghiệm thực tế tăng cường (AR) và thực tế ảo (VR) đắm chìm ngay trong trình duyệt. Một trong những khía cạnh cơ bản của việc xây dựng các ứng dụng WebXR tương tác là hiểu và sử dụng hiệu quả kết quả hit test. Bài viết blog này cung cấp một hướng dẫn toàn diện về việc xử lý kết quả hit test thu được thông qua dò tia (ray casting), cho phép bạn tạo ra các tương tác người dùng trực quan và hấp dẫn trong các cảnh WebXR của mình.

Dò tia (Ray Casting) là gì và Tại sao nó lại quan trọng trong WebXR?

Dò tia (Ray casting) là một kỹ thuật được sử dụng để xác định xem một tia, bắt nguồn từ một điểm và hướng cụ thể, có giao với các đối tượng trong một cảnh 3D hay không. Trong WebXR, dò tia thường được sử dụng để mô phỏng ánh nhìn của người dùng hoặc quỹ đạo của một vật thể ảo. Khi tia giao với một bề mặt trong thế giới thực (trong AR) hoặc một vật thể ảo (trong VR), một kết quả hit test sẽ được tạo ra.

Kết quả hit test rất quan trọng vì nhiều lý do:

• Vị trí của Vật thể ảo: Trong AR, hit test cho phép bạn đặt chính xác các vật thể ảo lên các bề mặt trong thế giới thực, chẳng hạn như bàn, sàn nhà hoặc tường.
• Tương tác Người dùng: Bằng cách theo dõi nơi người dùng đang nhìn hoặc chỉ vào, hit test cho phép tương tác với các vật thể ảo, chẳng hạn như chọn, thao tác hoặc kích hoạt chúng.
• Điều hướng: Trong môi trường VR, hit test có thể được sử dụng để triển khai các hệ thống điều hướng, cho phép người dùng dịch chuyển tức thời hoặc di chuyển xung quanh cảnh bằng cách chỉ vào các vị trí cụ thể.
• Phát hiện Va chạm: Hit test có thể được sử dụng để phát hiện va chạm cơ bản, xác định khi nào một vật thể ảo va chạm với một vật thể khác hoặc thế giới thực.

Tìm hiểu về API Hit Test của WebXR

API Hit Test của WebXR cung cấp các công cụ cần thiết để thực hiện dò tia và thu được kết quả hit test. Dưới đây là phân tích các khái niệm và hàm chính:

XRRay

Một XRRay đại diện cho một tia trong không gian 3D. Nó được xác định bởi một điểm gốc và một véc-tơ hướng. Bạn có thể tạo một XRRay bằng phương thức XRFrame.getPose(), phương thức này trả về tư thế của một nguồn đầu vào được theo dõi (ví dụ: đầu của người dùng, một bộ điều khiển tay). Từ tư thế đó, bạn có thể suy ra điểm gốc và hướng của tia.

XRHitTestSource

Một XRHitTestSource đại diện cho một nguồn kết quả hit test. Bạn tạo một nguồn hit test bằng phương thức XRSession.requestHitTestSource() hoặc XRSession.requestHitTestSourceForTransientInput(). Phương thức đầu tiên thường được sử dụng cho việc hit test liên tục dựa trên một nguồn bền vững, chẳng hạn như vị trí đầu của người dùng, trong khi phương thức thứ hai dành cho các sự kiện đầu vào tạm thời, như nhấn nút hoặc cử chỉ.

XRHitTestResult

Một XRHitTestResult đại diện cho một điểm giao duy nhất giữa tia và một bề mặt. Nó chứa thông tin về điểm giao, chẳng hạn như khoảng cách từ gốc tia đến điểm chạm và tư thế của điểm chạm trong không gian tham chiếu của cảnh.

XRHitTestResult.getPose()

Phương thức này trả về XRPose của điểm chạm. Tư thế này chứa vị trí và hướng của điểm chạm, có thể được sử dụng để đặt các vật thể ảo hoặc thực hiện các phép biến đổi khác.

Xử lý Kết quả Hit Test: Hướng dẫn Từng bước

Hãy cùng đi qua quy trình thu nhận và xử lý kết quả hit test trong một ứng dụng WebXR. Ví dụ này giả định bạn đang sử dụng một thư viện kết xuất đồ họa như three.js hoặc Babylon.js.

1. Yêu cầu một Nguồn Hit Test

Đầu tiên, bạn cần yêu cầu một nguồn hit test từ XRSession. Điều này thường được thực hiện sau khi phiên đã bắt đầu. Bạn sẽ cần chỉ định hệ tọa độ mà bạn muốn kết quả hit test được trả về. Ví dụ:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Giải thích:

• xrSession.requestHitTestSource(): Hàm này yêu cầu một nguồn hit test từ phiên XR.
• { space: xrSession.viewerSpace }: Điều này chỉ định hệ tọa độ mà kết quả hit test sẽ được trả về. viewerSpace là tương đối so với vị trí của người xem, trong khi local là tương đối so với gốc XR. Bạn cũng có thể sử dụng localFloor để theo dõi tương đối so với sàn nhà.
• Xử lý lỗi: Khối try...catch đảm bảo rằng các lỗi trong quá trình tạo nguồn hit test được bắt và ghi lại.

2. Thực hiện Hit Test trong Vòng lặp Animation

Bên trong vòng lặp animation của bạn (hàm kết xuất mỗi khung hình), bạn sẽ cần thực hiện hit test bằng phương thức XRFrame.getHitTestResults(). Phương thức này trả về một mảng các đối tượng XRHitTestResult, đại diện cho tất cả các điểm giao được tìm thấy trong cảnh.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Giải thích:

• frame.getViewerPose(xrSession.referenceSpace): Lấy tư thế của người xem (headset). Điều này cần thiết để biết người xem đang ở đâu và nhìn vào đâu.
• frame.getHitTestResults(xrHitTestSource): Thực hiện hit test bằng cách sử dụng nguồn hit test đã được tạo trước đó.
• hitTestResults.length > 0: Kiểm tra xem có tìm thấy bất kỳ điểm giao nào không.

3. Xử lý Kết quả Hit Test

Hàm processHitTestResults() là nơi bạn sẽ xử lý các kết quả của hit test. Điều này thường bao gồm việc cập nhật vị trí và hướng của một vật thể ảo dựa trên tư thế của điểm chạm.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Giải thích:

• hitTestResults[0]: Lấy kết quả hit test đầu tiên. Nếu có thể có nhiều điểm giao, bạn có thể cần lặp qua toàn bộ mảng và chọn kết quả phù hợp nhất dựa trên logic của ứng dụng.
• hit.getPose(xrSession.referenceSpace): Lấy tư thế của điểm chạm trong không gian tham chiếu được chỉ định.
• virtualObject.position.set(...) và virtualObject.quaternion.set(...): Cập nhật vị trí và góc quay (quaternion) của một vật thể ảo (ví dụ: một Mesh của three.js) để khớp với tư thế của điểm chạm.
• Phản hồi Trực quan: Ví dụ cũng bao gồm mã để hiển thị phản hồi trực quan tại điểm chạm, chẳng hạn như một vòng tròn hoặc một điểm đánh dấu đơn giản, để giúp người dùng hiểu họ đang tương tác ở đâu trong cảnh.

Các Kỹ thuật Hit Testing Nâng cao

Ngoài ví dụ cơ bản ở trên, có một số kỹ thuật nâng cao bạn có thể sử dụng để cải thiện việc triển khai hit testing của mình:

Hit Testing với Đầu vào Tạm thời

Đối với các tương tác được kích hoạt bởi đầu vào tạm thời, chẳng hạn như nhấn nút hoặc cử chỉ tay, bạn có thể sử dụng phương thức XRSession.requestHitTestSourceForTransientInput(). Phương thức này tạo ra một nguồn hit test dành riêng cho một sự kiện đầu vào duy nhất. Điều này hữu ích để tránh các tương tác không mong muốn dựa trên việc hit test liên tục.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Lọc Kết quả Hit Test

Trong một số trường hợp, bạn có thể muốn lọc kết quả hit test dựa trên các tiêu chí cụ thể, chẳng hạn như khoảng cách từ gốc tia hoặc loại bề mặt đã giao. Bạn có thể đạt được điều này bằng cách lọc thủ công mảng XRHitTestResult sau khi nhận được nó.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Sử dụng các Không gian Tham chiếu Khác nhau

Việc lựa chọn không gian tham chiếu (viewerSpace, local, localFloor, hoặc các không gian tùy chỉnh khác) ảnh hưởng đáng kể đến cách kết quả hit test được diễn giải. Hãy xem xét những điều sau:

• viewerSpace: Cung cấp kết quả tương đối so với vị trí của người xem. Điều này hữu ích để tạo các tương tác được liên kết trực tiếp với ánh nhìn của người dùng.
• local: Cung cấp kết quả tương đối so với gốc XR (điểm bắt đầu của phiên XR). Điều này phù hợp để tạo các trải nghiệm mà các vật thể vẫn cố định trong môi trường vật lý.
• localFloor: Tương tự như local, nhưng trục Y được căn chỉnh với sàn nhà. Điều này đơn giản hóa quá trình đặt các vật thể lên sàn.

Hãy chọn không gian tham chiếu phù hợp nhất với yêu cầu của ứng dụng của bạn. Thử nghiệm với các không gian tham chiếu khác nhau để hiểu hành vi và giới hạn của chúng.

Các Chiến lược Tối ưu hóa cho Hit Testing

Hit testing có thể là một quá trình tốn nhiều tài nguyên tính toán, đặc biệt là trong các cảnh phức tạp. Dưới đây là một số chiến lược tối ưu hóa cần xem xét:

• Giới hạn Tần suất Hit Test: Chỉ thực hiện hit test khi cần thiết, thay vì mỗi khung hình. Ví dụ, bạn có thể chỉ thực hiện hit test khi người dùng đang tích cực tương tác với cảnh.
• Sử dụng Cấu trúc Phân cấp Thể tích Bao (BVH): Nếu bạn đang thực hiện hit test với một số lượng lớn các đối tượng, hãy xem xét sử dụng BVH để tăng tốc các phép tính giao cắt. Các thư viện như three.js và Babylon.js cung cấp các triển khai BVH tích hợp sẵn.
• Phân vùng Không gian: Chia cảnh thành các vùng nhỏ hơn và chỉ thực hiện hit test đối với các vùng có khả năng chứa các điểm giao. Điều này có thể giảm đáng kể số lượng đối tượng cần kiểm tra.
• Giảm Số lượng Đa giác: Đơn giản hóa hình học của các mô hình của bạn để giảm số lượng đa giác cần kiểm tra. Điều này có thể cải thiện hiệu suất, đặc biệt là trên các thiết bị di động.
• WebWorker: Chuyển các tính toán sang một web worker để đảm bảo quá trình hit test không khóa luồng chính.

Những Lưu ý về Đa nền tảng

WebXR hướng đến việc đa nền tảng, nhưng có thể có những khác biệt nhỏ trong hành vi trên các thiết bị và trình duyệt khác nhau. Hãy lưu ý những điều sau:

• Khả năng của Thiết bị: Không phải tất cả các thiết bị đều hỗ trợ tất cả các tính năng của WebXR. Sử dụng phát hiện tính năng để xác định tính năng nào có sẵn và điều chỉnh ứng dụng của bạn cho phù hợp.
• Hồ sơ Đầu vào: Các thiết bị khác nhau có thể sử dụng các hồ sơ đầu vào khác nhau (ví dụ: generic-touchscreen, hand-tracking, gamepad). Đảm bảo rằng ứng dụng của bạn hỗ trợ nhiều hồ sơ đầu vào và cung cấp các cơ chế dự phòng thích hợp.
• Hiệu suất: Hiệu suất có thể thay đổi đáng kể trên các thiết bị khác nhau. Tối ưu hóa ứng dụng của bạn cho các thiết bị cấp thấp nhất mà bạn dự định hỗ trợ.
• Khả năng Tương thích của Trình duyệt: Đảm bảo ứng dụng của bạn được kiểm thử và hoạt động trên các trình duyệt lớn như Chrome, Firefox và Edge.

Ví dụ Toàn cầu về các Ứng dụng WebXR Sử dụng Hit Testing

Dưới đây là một số ví dụ về các ứng dụng WebXR sử dụng hiệu quả hit testing để tạo ra những trải nghiệm người dùng hấp dẫn và trực quan:

• IKEA Place (Thụy Điển): Cho phép người dùng đặt đồ nội thất IKEA ảo trong nhà của họ bằng AR. Hit testing được sử dụng để định vị chính xác đồ nội thất trên sàn và các bề mặt khác.
• Sketchfab AR (Pháp): Cho phép người dùng xem các mô hình 3D từ Sketchfab trong AR. Hit testing được sử dụng để đặt các mô hình trong thế giới thực.
• Hình ảnh Tăng cường (Nhiều nơi): Nhiều ứng dụng AR sử dụng theo dõi hình ảnh kết hợp với hit testing để neo nội dung ảo vào các hình ảnh hoặc điểm đánh dấu cụ thể trong thế giới thực.
• Trò chơi WebXR (Toàn cầu): Nhiều trò chơi đang được phát triển bằng WebXR, trong đó nhiều trò chơi dựa vào hit testing để đặt đối tượng, tương tác và điều hướng.
• Chuyến tham quan ảo (Toàn cầu): Các chuyến tham quan đắm chìm tại các địa điểm, bảo tàng hoặc tài sản thường sử dụng hit testing để điều hướng người dùng và các yếu tố tương tác trong môi trường ảo.

Kết luận

Việc nắm vững kết quả hit test của WebXR và xử lý dò tia là điều cần thiết để tạo ra các trải nghiệm AR và VR hấp dẫn và trực quan trên web. Bằng cách hiểu các khái niệm cơ bản và áp dụng các kỹ thuật được mô tả trong bài viết này, bạn có thể xây dựng các ứng dụng đắm chìm kết hợp liền mạch giữa thế giới ảo và thực, hoặc tạo ra các môi trường ảo hấp dẫn với các tương tác người dùng tự nhiên và trực quan. Hãy nhớ tối ưu hóa việc triển khai hit testing của bạn để đạt hiệu suất cao và xem xét tính tương thích đa nền tảng để đảm bảo trải nghiệm mượt mà cho tất cả người dùng. Khi hệ sinh thái WebXR tiếp tục phát triển, hãy mong đợi những tiến bộ và cải tiến hơn nữa đối với API hit testing, mở ra nhiều khả năng sáng tạo hơn nữa cho việc phát triển web đắm chìm. Luôn tham khảo các thông số kỹ thuật WebXR mới nhất và tài liệu của trình duyệt để có thông tin cập nhật nhất.